import React,{useState} from 'react'
import "./style.css"
import { DownOutlined,UpOutlined  } from '@ant-design/icons';
const Index:React.FC = ({option}) => {
//  console.log(option);
const [active ,setActive]=useState<number>(0)

const [Search,setSearch]=useState<boolean>(false)
const [wrapState,setWrapState]=useState<React.CSSProperties | undefined>({
        flexWrap:"nowrap"
    })
const handOpen=()=>{
        if(!Search){
           setWrapState({ flexWrap:"wrap"})
           setSearch(true)
        }else{
           setWrapState({ flexWrap:"nowrap"})
           setSearch(false)
        }
    }

  return (
    <div className='searchcha'>
      {
        <h3>{option.title}:</h3>
      }
      <ul style={wrapState}>
        {
        option.values.map((item,index)=>{
            return (
                <li key={index} onClick={()=>{setActive(index)}} className={active==index?'on':''}>
                    {item}
                </li>
            )
        })
        }
      </ul>
      {
            option.values.length >12 &&(
                <button className='handBtn' onClick={handOpen}>{Search ? "收起" : "更多"}{Search?<DownOutlined />:<UpOutlined />}</button>
            )
        }
    </div>
  )
}

export default Index
